<template>
  <app-container>
    <app-block>
      <zm-tabs
        :list="PRODUCT_LIST_TYPE"
        v-model="searchForm.shelfStatus"
        name-key="value"
        class="mb20"
        tab-type=""
        @tab-click="onSearch"
      ></zm-tabs>
      <zm-form :model="searchForm" ref="searchForm" inline>
        <zm-form-item prop="name">
          <zm-input
            class="w200"
            v-model="searchForm.name"
            placeholder="请输入产品名称/编码查询"
          />
        </zm-form-item>
        <zm-form-item prop="businessType">
          <zm-data-select
            v-model="searchForm.businessType"
            :list="BUSINESS_TYPE"
            class="w200"
            clearable
            placeholder="业务类型"
            multiple
            str
          >
          </zm-data-select>
        </zm-form-item>
        <zm-form-item prop="productType">
          <zm-data-select
            v-model="searchForm.productType"
             k1="productType"
            class="w200"
            clearable
            placeholder="产品类型"
            multiple
            str
          >
          </zm-data-select>
        </zm-form-item>
        <zm-form-item prop="exchangeRange">
          <zm-data-select
            v-model="searchForm.exchangeRange"
            :list="PRODUCT_EXCHANGE"
            class="w200"
            clearable
            placeholder="兑换范围"
            multiple
            str
          >
          </zm-data-select>
        </zm-form-item>
        <zm-form-item prop="apartmentId">
          <tree-select
            v-model="searchForm.apartmentId"
            :tree="apartmentList"
            :tree-props="{ label: 'name', valueKey: 'value' }"
            :is-checkbox="true"
            placeholder="可售部门"
            ref="treeSelect"
            class="dib"
          ></tree-select>
        </zm-form-item>
        <zm-form-item>
          <zm-button @click="onSearch" t="search"></zm-button>
          <zm-button @click="handleReset" t="reset"></zm-button>
        </zm-form-item>
      </zm-form>
      <zm-table-data
        :data="tableParams.data"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :show-page="true"
        :store-key="STORE_KEY_PRODUCT_LIST"
      >
      </zm-table-data>
    </app-block>
    <!-- 产品详情 -->
    <detail v-if="isShowDetail" v-model="isShowDetail" :id="detailID" :is-show-btn="false"></detail>
    <physical-detail v-if="detailParams.visible" v-model="detailParams.visible" :id="detailID"></physical-detail>
  </app-container>
</template>

<script>
import { PRODUCT_LIST_TYPE } from '@/model/type'
import {STORE_KEY_PRODUCT_LIST} from '@/model/tableStoreKey'
import {saleList, columns} from './const'
import tableMixin from '@/mixins/zmTableMixin'
import publicApis from '@/api/src/public'
import productApis from '@/api/src/product'
import TreeSelect from '@/components/TreeSelect'
import {BUSINESS_TYPE, PRODUCT_EXCHANGE} from '@/model'
import Detail from '@/components/DetailContainer'
// import PhysicalDetail from '@/views/product/physicalProductConfig/components/physicalProductConfigDetail/components/baseInfo/components/SingleDetail.vue'
import PhysicalDetail from '@/views/product/physicalProductConfig/components/physicalProductConfigDetail/index.vue'

export default {
  name: 'ProductList',
  components: {TreeSelect, Detail, PhysicalDetail},
  mixins: [tableMixin],
  data () {
    return {
      STORE_KEY_PRODUCT_LIST,
      PRODUCT_LIST_TYPE,
      BUSINESS_TYPE,
      PRODUCT_EXCHANGE,
      searchForm: {
        shelfStatus: '1',
        name: '',
        businessType: '',
        productType: '',
        exchangeRange: '',
        apartmentId: ''
      },
      apartmentList: [],
      isShowDetail: false,
      detailID: '',
      detailParams: {
        visible: false
      }
    }
  },
  computed: {
    // 可售部门
    saleList () {
      return saleList
    },
    columns () {
      return columns(this)
    }
  },
  watch: {},
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.apartmentList = await publicApis.apartmentList()
    },
    async loadList () {
      const _res = await productApis.getPageList(this.assignQuery(this.searchForm))
      this.initialTableData(_res.list, _res.count)
    },
    // 操作按钮
    async operation (type, row, status) {
      switch (type) {
        case 'detail':
          if (row.type === '6') {
            this.detailParams = {
              visible: true
            }
            this.detailID = row.id
          } else {
            this.isShowDetail = true
            this.detailID = row.id
          }
          break
        case 'up':
          await productApis.updateStatus({id: row.id, status: '1'})
          this.loadList()
          this.$message.success('产品上架成功')
          break
        case 'down':
          this.$confirm(
            '确定下架此产品？所属部门将不可售，请谨慎操作',
            '下架',
            {
              type: 'warning'
            }
          )
            .then(async () => {
              await productApis.updateStatus({id: row.id, status: '2'})
              this.loadList()
              this.$message.success('产品已下架')
            })
            .catch((err) => err)
          break
        case 'del':
          productApis.deletePop({ids: row.id}).then(res => {
            if (+res.isCan === 1) {
              this.$confirm(res.message, '删除', {
                type: 'warning'
              })
                .then(async () => {
                  await productApis.delete({ids: row.id})
                  this.loadList()
                  this.$message.success('操作成功')
                })
                .catch((err) => err)
            } else {
              this.$message.warning(res.message)
            }
          })
          break
      }
    },
    handleReset () {
      this.$refs.treeSelect.clearSelect()
      this.onReset()
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
